<template>
  <div class="distributors-baseInfo">
    <el-form
      class="form-detail"
      label-position="right"
      label-width="120px"
    >
      <el-row
        :gutter="20"
        style="width:100%"
      >
        <el-col :span="8">
          <el-form-item
            label="流程编号："
            style="width: 100%;"
          >
            <span>{{ detailData.processNo }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="创建时间："
            style="width: 100%;"
          >
            {{ dateFormat('yyyy-mm-dd HH:MM', detailData.startTime) }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="创建人："
            style="width: 100%;"
          >
            <span>{{ detailData.initiator }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="baseInfo">
      <item-title title="基本信息" />
      <el-form
        v-if="data"
        class="form-detailData"
        label-position="right"
        label-width="140px"
        inline
        :model="data"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="配送商名称：">
              <div>
                <change-form-value
                  v-model:detail-data="data"
                  item-key="distributeName"
                  get-label-key=""
                />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="统一社会信用代码：">
              <div>
                <change-form-value
                  v-model:detail-data="data"
                  item-key="creditCode"
                  get-label-key=""
                />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="企业所在地区：">
              <div
                v-if="data?.Old?.provinceCode!==data?.New?.provinceCode||data?.Old?.cityCode!==data?.New?.cityCode||data?.Old?.areaCode!==data?.New?.areaCode"
                class="flow-statu-color"
              >
                <span>{{ data?.Old?.provinceName }} / {{ data?.Old?.cityName }} / {{ data?.Old?.areaName }}</span>
                <span>--></span>
                <span>{{ data?.New?.provinceName }} / {{ data?.New?.cityName }} / {{ data?.New?.areaName }}</span>
              </div>
              <div v-else><span>{{ data?.New?.provinceName }} / {{ data?.New?.cityName }} / {{ data?.New?.areaName }}</span></div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人：">
              <div>
                <change-form-value
                  v-model:detail-data="data"
                  item-key="contactsName"
                  get-label-key=""
                />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话：">
              <div>
                <change-form-value
                  v-model:detail-data="data"
                  item-key="contactsPhone"
                  get-label-key=""
                />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="详细地址：">
              <div>
                <change-form-value
                  v-model:detail-data="data"
                  item-key="address"
                  get-label-key=""
                />
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="cert-info">
      <item-title title="资质信息信息" />
      <div class="certList">
        <files-upload-view
          ref="filesRef"
          :list="data?.New?.qualifications"
          disabled
        />
      </div>
    </div>
  </div>
</template>

<script>
import {defineComponent, reactive, toRefs, watch} from 'vue'

export default defineComponent({
  props: {
    detailData: {
      type: Object,
      default: () => {},
    },
  },
  setup(props, context) {
    var reactiveData = reactive({
      detailData: {},
      data: props.detailData,
    })
    watch(
      () => props.detailData,
      (newval, oldval) => {
        if (newval) {
          reactiveData.detailData = newval
          reactiveData.data = newval.data
          console.log(232)
        }
      },
      { immediate: true, deep: true }
    )
    return {
      ...toRefs(reactiveData),
    }
  },
})
</script>

<style lang="scss" scoped>
.certList {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
</style>

